<template>
  <div class="shelf-list">
    <div class="shelf-book-wrap"
         v-for="(book,index) in shelfList"
         :key="index"
         @click="gotoBookDetail(book.fileName)"
    >
      <div class="shelf-book-info">
        <div class="shelf-book-img">
          <ImageView
            :src="book.cover"
          />
        </div>
        <div class="shelf-book-title">{{ book.title }}</div>
      </div>
    </div>

    <div class="shelf-add" @click="gotoHome">
      <van-icon name="plus" color="#CACACA" size="30px"/>
    </div>
  </div>
</template>

<script>
  import ImageView from '../../components/base/ImageView.vue';

  export default {
    name: "ShelfList",
    components : {
      ImageView
    },
    props : {
      shelfList : [],
    },
    methods : {
      gotoHome(){
        this.$router.push({
          path : '/pages/index/main'
        })
      },
      gotoBookDetail(fileName){
        this.$router.push({
          path : '/pages/detail/main',
          query : {
            fileName
          },
        })
      },
    },
  };
</script>

<style lang="less" scoped>
  .shelf-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 32px;
    /*width: 347.5px;*/
    .shelf-book-wrap{
      width: 89px;
      height: 177px;
      margin-bottom: 48.5px;
      .shelf-book-info{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        .shelf-book-img{
          width: 89px;
          height: 128px;
        }
        .shelf-book-title{
          width: 90px;
          height: 38px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: normal;
          font-size: 14px;
          color: #333;
          line-height: 20px;
        }
      }
    }
    .shelf-add{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 89px;
      height: 128px;
      border: 1px solid #CBCBCB;
    }
  }
</style>
